<template>
  <div class="header-container">
    <div class="header-left">
      <div class="menu-button" @click="$router.go(-1)">
        <svg-icon class="svg-icon" icon="arrow-double-left" />
      </div>
      <div class="menu-popover">
        <div class="popover-title" @click="show = true">
          <span class="menu-title">菜单</span>
          <svg-icon class="svg-icon" icon="arrow-down" />
        </div>
      </div>
      <div class="menu-popover">
        <div class="popover-title">
          <span class="menu-title">工具</span>
          <svg-icon class="svg-icon" icon="arrow-down" />
        </div>
      </div>
    </div>
    <div class="header-main">
      <span class="title">{{ $route.query.name }}</span>
    </div>
    <div class="header-right">
      <div class="scale-value">
        <span>缩放比例：{{ zoom }}%</span>
      </div>
    </div>
    <div class="popover-container" v-if="show" @click="() => (show = !show)">
      <div class="popover-dialog">
        <div class="popover-button" @click="save">
          <span>保存</span>
          <span style="margin-left: 6px; color: #ddd">ctrl+s</span>
        </div>
        <div class="popover-button" @click="clear">清空</div>
        <div class="popover-button" @click="view">预览</div>
        <div class="popover-button" @click="exportJSON">导出配置文件</div>
        <div class="popover-button" @click="dialogVisible = true">
          导入配置文件
        </div>
      </div>
    </div>
    <el-dialog
      title="导入配置文件"
      :visible.sync="dialogVisible"
      v-dialog-drag
      :show-close="false"
      :append-to-body="true"
      width="540px"
    >
      <div class="dialog-content">
        <div class="import-button" @click="upload()">
          <input
            id="file"
            type="file"
            accept=".json"
            @change="importJSON($event)"
            style="display: none"
          />
          <!-- <svg-icon class="svg-icon" icon="import-json" /> -->
          <span>请选择配置文件</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FileSaver from "file-saver";
export default {
  props: {
    zoom: {
      type: String,
      default: 0,
    },
  },
  data() {
    return {
      dialogVisible: false,
      show: false,
    };
  },
  methods: {
    upload() {
      const inputEvent = document.getElementById("file");
      if (!inputEvent) return;
      inputEvent.click();
    },
    exportJSON() {
      const config = {
        page: {
          name: this.$route.query.name,
          weidth: this.$parent.layoutConfig.width,
          height: this.$parent.layoutConfig.height,
        },
        complex: this.$store.state.design.complexData,
      };
      const data = JSON.stringify(config);
      const blob = new Blob([data], {
        type: "",
      });
      FileSaver.saveAs(blob, `${this.$route.query.name}.json`);
    },
    importJSON(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsText(file);
      const _this = this;
      reader.onload = function () {
        const json = JSON.parse(this.result);
        // 检测是否导入成功
        console.log(json);
      };
    },
    handle() {
      this.show = true;
    },
    save() {
      this.$emit("save");
    },
    clear() {
      console.log("清空");
      this.$emit("clear");
    },
    view() {
      this.$router.push({
        name: "Page",
        query: this.$route.query,
      });
      this.$emit("view");
    },
  },
};
</script>

<style scoped lang="scss">
.header-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .header-left {
    width: 30%;
    min-width: 256px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .max {
      width: 96px;
      text-align: center;
    }

    .menu-button {
      height: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgb(247, 247, 247);
      border-radius: 4px;
      cursor: pointer;
      box-sizing: border-box;
      padding: 0 2px;

      &:hover {
        background: rgba(0, 0, 0, 0.1);
      }

      .menu-button-title {
        display: block;
      }

      .svg-icon {
        width: 20px;
        height: 100%;
        color: #000;
      }
    }
  }

  .header-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .svg-title {
      width: 20px;
      height: 20px;
    }

    .title {
      margin: 0px 6px;
      color: rgb(51, 51, 51);
      text-align: center;
      cursor: text;
    }
  }

  .header-right {
    width: 30%;
    min-width: 256px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .scale-value {
      height: 32px;
      line-height: 32px;
      text-align: right;
      font-size: 14px;
      color: rgb(51, 51, 51);
    }
  }
}
</style>

<style lang="scss" scoped>
.popover-import {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 2077;

  .import-dialog {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(255, 255, 255);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 20px 0px;
    width: 336px;

    .dialog-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 16px;

      .close-icon {
        width: 16px;
        height: 16px;
        cursor: pointer;
        color: #000;
      }
    }

    .dialog-content {
      padding: 6px 16px 16px 16px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.import-button {
  width: 100%;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  height: 148px;
  text-align: center;
  cursor: pointer;
  color: #606266;
  line-height: 146px;
  vertical-align: top;
  & span {
    margin: 0 6px;
    font-size: 14px;
  }

  &:hover {
    color: #409eff;
    border: 1px dashed #409eff;
  }
}

.popover-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
}

.popover-dialog {
  position: absolute;
  top: 50px;
  left: 16px;
  padding: 4px 0px;
  min-width: 200px;
  background: rgb(51, 51, 51);
  box-shadow: rgb(0 0 0 / 30%) 0px 2px 8px;
  border-radius: 4px;
  color: rgb(242, 244, 245);
  border: 1px solid rgb(69, 70, 71);
  z-index: 1024;

  .popover-button {
    width: 100%;
    height: 28px;
    font-size: 12px;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;

    &:hover {
      color: #409eff;
      background: #2f353bb5;
    }
  }
}

::v-deep {
  .el-dialog__body {
    padding: 10px 10px 20px 10px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  .el-dialog__header {
    padding: 10px 20px 10px;
  }
}

.menu-popover {
  position: relative;
  height: 46px;
  margin-left: 4px;
  display: flex;
  justify-content: center;
  align-items: center;

  .popover-title {
    width: 100%;
    height: 36px;
    padding: 0px 8px;
    background: rgb(247, 247, 247);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
      background: rgba(0, 0, 0, 0.1);
    }

    .svg-icon {
      width: 12px;
      text-align: center;
    }

    .menu-title {
      font-size: 14px;
      margin-right: 2px;
    }
  }
}
</style>
